import React, { useEffect } from 'react'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import echarts from 'echarts/lib/echarts';
import Options from './options'
import { Select } from 'antd'
import Data from './data'
import { isUndefined } from 'lodash'
import { connect } from 'dva';

const { Option } = Select

function Index({ dva, dispatch }) {

    const InitCreateApp = (config) => {
        var myChart = echarts.init(document.getElementById('tcbcom'));
        // 绘制图表
        myChart.setOption(Options(config));
    }

    useEffect(() => {
        InitCreateApp(Data)
    }, [])

    useEffect(() => {
        console.log(dva)
        if (!isUndefined(dva.data)) {
            InitCreateApp(dva)
        }
    }, [dva])

    const Optionse = !isUndefined(dva.list) && dva.list.map((v, i) => {
        
        return <Option value={v.kch}>{v.kcm}</Option>
    })

    const handleChange = (params) => {
        console.log(params);
        dispatch({ type: 'centerBottom/getDatas', params })
    }

    return (
        <BorderBox1 style={{ flex: 6, marginTop: 30 }} >
            <div style={{ position: 'absolute', right: 0, top: 0, zIndex: 2, right: 30, top: 15, transition: '1s' }}>
                <Select defaultValue="法学" allowClear={true} style={{ width: 100, fontSize: 15, background: '#bcdcff' }} onChange={handleChange}>
                    {Optionse}
                </Select>
            </div>
            <div id="tcbcom" style={{ width: '100%', height: '100%' }}></div>
        </BorderBox1>
    )
}

const mapStateToProps = ({ centerBottom, dispatch }, ownProps) => {
    return {
        dva: centerBottom,
        dispatch
    }
}

const A = connect(mapStateToProps)(Index)
export default A
